import { Component, OnInit, ElementRef, AfterViewInit, ViewChild, Renderer } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NzMessageService, NzModalRef, NzModalService } from 'ng-zorro-antd';


declare var $: any;
declare var jsPlumb: any;
declare var window: any;
@Component({
  selector: 'app-training-process',
  templateUrl: './training-process.component.html',
  styleUrls: ['./training-process.component.scss']
})
export class TrainingProcessComponent implements OnInit {
  confirmModal: NzModalRef; // For testing by now
  @ViewChild('greet')
  greetDiv: ElementRef;
  id;
  zoom = 1; // 放大缩小比例
  data; // 读取的数据
  jsonline; // 定义连接线信息
  jsonwire; // 定义图形数据信息
  htmlText = '';
  i = 0;
  numarr = [];
  max;
  targetel;
  popid;
  constructor(private modal: NzModalService, private elementRef: ElementRef, private renderer: Renderer, private router: Router, private activatedRoute: ActivatedRoute, private message: NzMessageService) { }
  ngOnInit() { }

  popsec() {
    $('.pop-up .pos-fixed').fadeOut();
  }
  popsure() {
    $('.pop-up .pos-fixed').fadeOut();
    jsPlumb.removeAllEndpoints(this.popid);
    $("#right").find(`#${this.popid}`).remove();

  }


  // 点击退出
  esc() {
    // 清除长方形和长圆角行
    this.router.navigate(['../home']);
    $('#right .node').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除菱形
    $('#right .allnode').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除文档
    $('#right .doc-node').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除子流程
    $('#right .sort-sub').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除数据库流程图
    $('#right .data-base').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除注释流程图
    $('#right .note-node').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
    // 清除注释流程图
    $('#right .prot-node').each(function () {
      jsPlumb.removeAllEndpoints($(this).attr("id")); // 清理掉所有的线和端点
    });
  }


  // 点击清除数据库
  deldata(): void {
    this.confirmModal = this.modal.confirm({
      nzTitle: '提示！',
      nzContent: '确定要清除数据吗？',
      nzOnOk: () => this.confirm()
    });
  }
  confirm() {
    localStorage.removeItem('data1');
    this.textback();
  }


  // 点击保存到数据库
  save(type: string): void {
    const that = this;
    const connects = []; // 连接线数组
    $.each(jsPlumb.getAllConnections(), function (idx, connection) {
      connects.push({
        ConnectionId: connection.id,
        PageSourceId: connection.sourceId,
        PageTargetId: connection.targetId,
        // SourceText: connection.source.innerText,
        // TargetText: connection.target.innerText,
      });
    });
    const blocks = []; // 数据数组
    // 获取开始、流程、判断数据
    $('#right .node').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.html(),
        Blockstyle: $elem.hasClass('radius'),
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });
    // 获取判断数据
    $('#right .allnode').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.find(".node3s").html(),
        Blockstyle: "node3",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });

    // 获取文档数据
    $('#right .doc-node').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.find(".doc-text").html(),
        Blockstyle: "node5",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });
    // 获取子流程数据
    $('#right .sort-sub').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.find(".sort-sub-text").html(),
        Blockstyle: "node6",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });
    // 获取数据库流程图数据
    $('#right .data-base').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.html(),
        Blockstyle: "node7",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });
    // 获取注释流程图数据
    $('#right .note-node').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.find(".note-node-box-text").html(),
        Blockstyle: "node8",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });
    // 获取页面内引用流程图数据
    $('#right .prot-node').each(function (idx, elem) {
      const $elem = $(elem);
      blocks.push({
        Blocki: that.i,
        BlockId: $elem.attr('id'),
        BlockContent: $elem.html(),
        Blockstyle: "node9",
        BlockX: parseInt($elem.css('left'), 10),
        BlockY: parseInt($elem.css('top'), 10)
      });
    });


    const serliza = JSON.stringify(connects) + '&' + JSON.stringify(blocks);
    if (connects[0] || blocks[0]) {
      localStorage.setItem('data1', serliza);
      this.message.create(type, `保存成功！`);
    } else {
      this.message.create(type, `保存不能为空！`);
    }
  }

  // 连线起点
  // tslint:disable-next-line:member-ordering
  connectorPaintStyle = {
    lineWidth: 2.4,
    strokeStyle: '#61B7CF',
    joinstyle: 'round',
  };
  // 鼠标悬浮在连接线上的样式
  // tslint:disable-next-line:member-ordering
  connectorHoverStyle = {
    lineWidth: 2.4,
    strokeStyle: '#367E90',
  };
  // tslint:disable-next-line:member-ordering
  hollowCircle = {
    endpoint: ['Dot', {
      radius: 0.00000001
    }], // 端点的形状
    scope: 'Dot', // 连接点的标识符，只有标识符相同的连接点才能连接
    isTarget: false,    // 是否可以放置（连线终点）
    connectorStyle: this.connectorPaintStyle, // 连接线的颜色，大小样式
    connectorHoverStyle: this.connectorHoverStyle, // 鼠标悬浮在连接线上的样式
    paintStyle: { // 端点的颜色样式
      strokeStyle: '#1e8151',
      fillStyle: 'transparent',
      radius: 8,
    },
    // anchor: "AutoDefault",
    isSource: true, // 是否可以拖动（作为连线起点）
    // connector: ["Flowchart", { cornerRadius: 5 }],
    connector: ['Flowchart', {
      stub: [40, 60],
      gap: 10,
      cornerRadius: 5,
    }], // 连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
    maxConnections: -1, // 设置连接点最多可以连接几条线
    connectorOverlays: [
      ['Arrow', {
        width: 16,
        length: 16,
        location: 1
      }]
    ]
  };

  // 连线终点
  // tslint:disable-next-line:member-ordering
  hollowCirclez = {
    endpoint: ['Dot', {

    }], // 端点的形状
    scope: 'Dot', // 连接点的标识符，只有标识符相同的连接点才能连接
    paintStyle: { // 端点的颜色样式
      strokeStyle: '#1e8151',
      fillStyle: '#1e8151',
      radius: 8,
    },
    // anchor: "AutoDefault",
    isSource: false, // 是否可以拖动（作为连线起点）
    isTarget: true, // 是否可以放置（连线终点）
    maxConnections: -1, // 设置连接点最多可以连接几条线(-1代表不限制)
    connectorOverlays: [

    ]
  };

  // 回显端点和连接线
  jsplumbback() {
    if (this.data) {
      if (this.jsonwire.length > 0) {
        this.jsonwire.forEach((onerow, index) => {
          jsPlumb.addEndpoint(onerow.BlockId, {
            anchors: 'TopCenter'
          }, this.hollowCirclez);
          jsPlumb.addEndpoint(onerow.BlockId, {
            anchors: 'BottomCenter'
          }, this.hollowCircle);
        });
      }
      if (this.jsonline.length > 0) {
        this.jsonline.forEach((onerow, index) => {
          jsPlumb.connect({
            source: onerow.PageSourceId,
            target: onerow.PageTargetId,
            anchors: ['BottomCenter', 'TopCenter'],
            paintStyle: {
              lineWidth: 2.4,
              strokeStyle: '#1E8151',
              joinstyle: 'round',
            },
            connector: ['Flowchart', {
              stub: [40, 60],
              gap: 10,
              cornerRadius: 5,
            }],
            overlays: [['Arrow', {
              width: 16,
              length: 16,
              location: 1
            }]],
            endpoint: ['Dot', {
              radius: 0.00000001
            }],
            hoverPaintStyle: { lineWidth: 2.4, strokeStyle: '#4DBF86' },

          });
        });
      }
    }
  }
  // 回显文字和形状
  textback() {
    const that = this;
    $('#right').draggable({});
    that.data = localStorage.getItem('data1');
    console.log(this.data);
    if (this.data) {
      that.numarr = [];
      that.jsonline = JSON.parse(this.data.split('&')[0]);
      that.jsonwire = JSON.parse(this.data.split('&')[1]);

      if (that.jsonwire.length > 0) {
        this.jsonwire.forEach((onerow, index) => {
          if (onerow.Blockstyle === true) {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class='node radius' id= '${onerow.BlockId}' style='left:${onerow.BlockX}px;top:${onerow.BlockY}px;box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;border-radius: 25em;'> ${onerow.BlockContent}</div>`;
          } else if (onerow.Blockstyle === 'node3') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="allnode" style="width: 110px; height: 110px; position: absolute; left: ${onerow.BlockX}px; top: ${onerow.BlockY}px;" id= '${onerow.BlockId}'><div class="judge" style=" box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;;background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;width: 80px;height: 80px;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);position: relative;left: 15px;top:15px;"><span style="position:absolute;transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);left:1px;top:28px;display:block;white-space:nowrap;width:80px;overflow:hidden;" class="node3s">${onerow.BlockContent}</span></div></div>`;

          } else if (onerow.Blockstyle === 'node5') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="doc-node" style="width:150px;height:83px;top:220px;overflow:hidden;position:absolute;text-align:center;cursor:pointer;opacity:0.8;filter:alpha(opacity=80); z-index: 0;left: ${onerow.BlockX}px; top: ${onerow.BlockY}px;" id= '${onerow.BlockId}'><span style="width: 1px;height: 15px;border: 1px solid #346789;position:absolute;z-index: 1;right: -1px;top: 47px;"></span><span class="doc-text" style="font-size:9pt;color:black;position:absolute;z-index:1;top:18px;left:15px;width:120px;">${onerow.BlockContent}</span><div class="doc-left" style="border-left:1px solid #346789;border-top:1px solid #346789;background-color:#eeeeef;float:left;width:75px;height:38px;position:relative;"><div class="doc-left-circle" style="position:absolute;border-bottom:1px solid #346789;position:absolute;width:76px;height:59px;background:#eeeeef;left:-1px;border-radius:0 0 50px 50px;top:23px;border-left:1px solid #346789;"></div></div><div class="doc-right" style="border-top:1px solid #346789;border-right:1px solid #346789;background-color:#eeeeef;position:relative;float:left;width:75px;height:55px;"><div class="doc-right-circle" style="position:absolute;border-top:1px solid #346789;position:absolute;width:94px;height:40px;background:transparent;right:-10px;top:53px;border-radius:50%;-webkit-box-shadow:15px 15px 0 0 #eeeeef;box-shadow:5px -11px 0 0 #eeeeef;"></div></div></div>`;
          } else if (onerow.Blockstyle === 'node6') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="sort-sub" style="opacity: 0.8;filter: alpha(opacity=80);position:absolute;left: ${onerow.BlockX}px; top: ${onerow.BlockY}px;width:150px;height:62px;border:1px solid #346789;background:#eeeeef; z-index: 0;cursor:pointer;" id= '${onerow.BlockId}'><div class="sort-sub-box" style="width:90px;height:62px;margin:auto;border-left:1px solid #346789;border-right:1px solid #346789;text-align:center;line-height:62px;"><span class="sort-sub-text" style="font-size:9pt;color:black;">${onerow.BlockContent}</span></div></div>`;
          } else if (onerow.Blockstyle === 'node7') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="data-base" id= '${onerow.BlockId}' style="color:black;width:64px;height:91px;background:#eeeeef; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);border:1px solid #346789;position:absolute;left:${onerow.BlockX}px;top:${onerow.BlockY}px;border-radius:20px;font-size:9pt;text-align:center;line-height:91px;">${onerow.BlockContent}</div>`;
          } else if (onerow.Blockstyle === 'node8') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="note-node" id= '${onerow.BlockId}' style="width:120px;height:60px; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);position:absolute;left: ${onerow.BlockX}px; top: ${onerow.BlockY}px;"><span class="note-node-box-line" style="position:absolute;right:-1px;top:43px;width:37px;height:1px;background:#346789;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);"></span><div class="note-node-box" style="border:1px solid #346789;border-left:transparent;width:90px;height:60px;font-size:9pt;text-align:center;line-height:60px;background:#eeeeef;"><span class="note-node-box-text" style="font-size:9pt;color:black;">${onerow.BlockContent}</span></div></div>`;
          } else if (onerow.Blockstyle === 'node9') {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class="prot-node" id= '${onerow.BlockId}' style="width:84px;height:84px;border-radius:50%; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);position:absolute;font-size: 9pt;color: black;left: ${onerow.BlockX}px; top: ${onerow.BlockY}px;border:1px solid #346789;background:#eeeeef;text-align:center;line-height:84px;">${onerow.BlockContent}</div>`;
          } else {
            // tslint:disable-next-line:max-line-length
            this.htmlText += `<div class='node' id='${onerow.BlockId}' style='left:${onerow.BlockX}px;top:${onerow.BlockY}px;box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;'> ${onerow.BlockContent}</div>`;
          }
        });
        $('#right').append(this.htmlText);
        this.jsonwire.forEach((onerow, index) => {
          jsPlumb.draggable(onerow.BlockId); // 回显后连续端点可拖拽
          $('#' + onerow.BlockId).draggable({}); // 回显后标签可拖拽

        });

        this.max = this.jsonwire[0].Blocki;
        this.i = this.max * 1;

      }
    } else {
      // 如果数据为空着清空
      this.i = 0;
      if ($('#right').children('div')) {
        $('#right .node').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除菱形
        $('#right .allnode').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除文档
        $('#right .doc-node').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除子流程
        $('#right .sort-sub').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除数据库流程图
        $('#right .data-base').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除注释流程图
        $('#right .note-node').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });
        // 清除页面内引用流程图
        $('#right .prot-node').each(function () {
          jsPlumb.removeAllEndpoints($(this).attr("id"));
          $(this).remove();
        });


      }
    }
  }

  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit() {
    jsPlumb.setContainer('right'); // 设置范围
    // this.renderer.setElementStyle(this.greetDiv.nativeElement, 'transform', 'scale(1)');
    // this.zoom = 1;
    const instance = window.jsPlumb;
    instance.setZoom(1);

    this.jsplumb();
  }
  jsplumb() {
    const that = this;
    this.textback(); // 数据回显


    // 更改文字
    $('#right').on('dblclick', '.node', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n1')) {
      } else {
        const text = $(this).text();
        $(this).html('');
        $(this).append('<input class="n1" maxlength = "5" style="width:130px" type=\'text\' value=\'' + text + '\' />');
      }

      $(this).mouseleave(function () {
        $(this).html($('input[type=\'text\']').val());
      });
    });

    // 更改判断文字
    $('#right').on('dblclick', '.judge', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n3')) {
      } else {
        const text = $(this).children("span").text();
        $(this).children("span").html('');
        $(this).children("span").append(`<input maxlength = "5" class="n3" style="width:64px" type='text' value="${text}" />`);
      }

      $(this).mouseleave(function () {
        $(this).children("span").html($(".n3").val());

      });
    });

    // 更改文档文字
    $('#right').on('dblclick', '.doc-node', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n5')) {
      } else {
        const text = $(this).children(".doc-text").text();
        $(this).children(".doc-text").html('');
        $(this).children(".doc-text").append(`<input maxlength = "5" class="n5" style="width:90px" type='text' value="${text}" />`);
      }
      $(this).mouseleave(function () {
        $(this).children(".doc-text").html($(".n5").val());

      });
    });

    // 更改子流程文字
    $('#right').on('dblclick', '.sort-sub', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n6')) {
      } else {
        const text = $(this).find(".sort-sub-text").text();
        $(this).find(".sort-sub-text").html('');
        $(this).find(".sort-sub-text").append(`<input maxlength = "5" class="n6" style="width:86px;height:22px;" type='text' value="${text}" />`);
      }
      $(this).mouseleave(function () {
        $(this).find(".sort-sub-text").html($(".n6").val());

      });
    });

    // 更改数据库流程图文字
    $('#right').on('dblclick', '.data-base', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n7')) {
      } else {
        const text = $(this).text();
        $(this).html('');
        $(this).append(`<input maxlength = "5" class="n7" style="width:58px;height:22px;" type='text' value="${text}" />`);
      }

      $(this).mouseleave(function () {
        $(this).html($(".n7").val());

      });
    });
    // 更改注释流程图文字
    $('#right').on('dblclick', '.note-node', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n8')) {
      } else {
        const text = $(this).find(".note-node-box-text").text();
        $(this).find(".note-node-box-text").html('');
        $(this).find(".note-node-box-text").append(`<input maxlength = "5" class="n8" style="width:70px;height:22px;" type='text' value="${text}" />`);
      }

      $(this).mouseleave(function () {
        $(this).find(".note-node-box-text").html($(".n8").val());

      });
    });
    // 更改页面内引用流程图文字
    $('#right').on('dblclick', '.prot-node', function (e) {
      e = e || window.event;
      const targetElement = e.target || e.srcElement;
      if (targetElement.nodeName.toLowerCase() === "input") {
      } else if ($(this).find("input").hasClass('n9')) {
      } else {
        const text = $(this).text();
        $(this).html('');
        $(this).append(`<input maxlength = "5" class="n9" style="width:70px;height:22px;" type='text' value="${text}" />`);
      }

      $(this).mouseleave(function () {
        $(this).html($(".n9").val());

      });
    });



    // 鼠标移动显示删除图标
    $('#right').on('mouseenter', '.node', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 140).css('top', -10);
    });
    $('#right').on('mouseleave', '.node', function () {
      $('img').remove();
    });


    // 菱形图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.allnode', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 79).css('top', 10);

    });
    $('#right').on('mouseleave', '.allnode', function () {
      $('img').remove();
    });

    // 文档图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.doc-node', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 130).css('top', 0);

    });
    $('#right').on('mouseleave', '.doc-node', function () {
      $('img').remove();
    });

    // 子流程图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.sort-sub', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 130).css('top', 0);

    });
    $('#right').on('mouseleave', '.sort-sub', function () {
      $('img').remove();
    });

    // 数据库图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.data-base', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 55).css('top', -10);

    });
    $('#right').on('mouseleave', '.data-base', function () {
      $('img').remove();
    });

    // 注释图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.note-node', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 70).css('top', 0);

    });
    $('#right').on('mouseleave', '.note-node', function () {
      $('img').remove();
    });

    // 页面内引用图鼠标移动显示删除图标
    $('#right').on('mouseenter', '.prot-node', function () {
      $(this).append('<img src="assets/img/delete.png"  style="position: absolute;width:20px;height:20px" />');
      $('img').css('left', 70).css('top', 0);

    });
    $('#right').on('mouseleave', '.prot-node', function () {
      $('img').remove();
    });



    // 点击图片删除
    $('#right').on('click', 'img', function (e) {
      $(".pos-fixed").fadeIn();
      that.popid = $(this).parent().attr('id');

      // if (confirm('确定要删除吗?')) {
      //   jsPlumb.removeAllEndpoints($(this).parent().attr('id'));
      //   $(this).parent().remove();

      // }



    });






    // 双击删除连接线
    jsPlumb.bind('dblclick', function (conn, originalEvent) {
      jsPlumb.detach(conn);
    });

    // 复制块
    $('#left').children().draggable({
      helper: 'clone',
      scope: 'ss',
    });


    // 放入块
    $('#right').droppable({
      scope: 'ss',
      drop: function (event, ui) {
        const left1 = (ui.offset.left - $(this).offset().left);
        const top1 = (ui.offset.top - $(this).offset().top);
        // tslint:disable-next-line:radix
        const left = parseInt((left1 / that.zoom).toString());
        // tslint:disable-next-line:radix
        const top = parseInt((top1 / that.zoom).toString());

        const name = ui.draggable[0].id;
        let id;

        switch (name) {
          case 'node1':
            that.i++;
            console.log(that.i);
            id = 'state_start' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append('<div style="box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;border-radius: 25em;" class="node radius" id="' + id + '">' + $(ui.helper).html() + '</div>');
            $('#' + id).css('left', left).css('top', top);

            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node2':
            that.i++;
            id = 'state_flow' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append('<div style="box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;" class="node" id="' + id + '">' + $(ui.helper).html() + '</div>');
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node3':
            that.i++;
            id = 'state_decide' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append(`<div class="allnode" style="width: 110px;height: 110px;position: absolute;z-index: 0;" id="${id}">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node4':
            that.i++;
            id = 'state_end' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append('<div style="box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;border-radius: 25em;" class="node radius" id="' + id + '" >' + $(ui.helper).html() + '</div>');
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node5':
            that.i++;
            id = 'state_end' + that.i;
            // tslint:disable-next-line:max-line-length
            // $(this).append('<div style="box-shadow: 2px 2px 19px #aaa;-o-box-shadow: 2px 2px 19px #aaa;-webkit-box-shadow: 2px 2px 19px #aaa;-moz-box-shadow: 2px 2px 19px #aaa;-moz-border-radius: 0.5em;border-radius: 0.5em;opacity: 0.8;filter: alpha(opacity=80);border: 1px solid #346789;width: 150px;text-align: center; z-index: 0;; background-color: #eeeeef;color: black;padding: 10px;font-size: 9pt;cursor: pointer;height: 40px;position: absolute;word-wrap: break-word;border-radius: 25em;" class="node radius" id="' + id + '" >' + $(ui.helper).html() + '</div>');
            $(this).append(`<div class="doc-node" style="width:150px;height:83px;top:220px;overflow:hidden;position:absolute;text-align:center;cursor:pointer;opacity:0.8;filter:alpha(opacity=80); z-index: 0;" id="${id}">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node6':
            that.i++;
            id = 'state_end' + that.i;
            $(this).append(`<div class="sort-sub" id="${id}" style="opacity: 0.8;filter: alpha(opacity=80);position:absolute;top:222px;left:222px;width:150px;height:62px;border:1px solid #346789;background:#eeeeef; z-index: 0;cursor:pointer;">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node7':
            that.i++;
            id = 'state_end' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append(`<div class="data-base" id="${id}" style="font-size: 9pt;color: black;width:64px;height:91px;background:#eeeeef; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);border:1px solid #346789;position:absolute;top:328px;left:77px;border-radius:20px;font-size:9pt;text-align:center;line-height:91px;">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node8':
            that.i++;
            id = 'state_end' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append(`<div class="note-node" id="${id}" style="width:120px;height:60px; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);position:absolute;top:342px;left:243px;">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
          case 'node9':
            that.i++;
            id = 'state_end' + that.i;
            // tslint:disable-next-line:max-line-length
            $(this).append(`<div class="prot-node" id="${id}" style="width:84px;height:84px;border-radius:50%; z-index: 0;cursor:pointer;opacity:0.8;filter:alpha(opacity=80);position:absolute;top:448px;font-size: 9pt;color: black;left:66px;border:1px solid #346789;background:#eeeeef;text-align:center;line-height:84px;">${$(ui.helper).html()}</div>`);
            $('#' + id).css('left', left).css('top', top);
            jsPlumb.addEndpoint(id, {
              anchors: 'TopCenter'
            }, that.hollowCirclez);
            jsPlumb.addEndpoint(id, {
              anchors: 'BottomCenter'
            }, that.hollowCircle);
            jsPlumb.draggable(id);
            $('#' + id).draggable({});
            break;
        }
      }
    });


    $('#flowWrap').bind('mousewheel', function (event) {
      // let transformOrigin = [event.offsetX / 50, event.offsetY / 50];
      jsPlumb.setContainer('right');

      let instance = window.jsPlumb;
      const dir = event.originalEvent.deltaY > 0 ? 'Up' : 'Down';
      let zoomval;
      zoomval = instance.getZoom();
      if (dir === 'Down') {
        zoomval = zoomval + 0.05 < 3 ? zoomval + 0.05 : 3;
      } else {
        zoomval = zoomval - 0.05 > 0.5 ? zoomval - 0.05 : 0.5;
      }


      // transformOrigin = transformOrigin || [0.5, 0.5];
      instance = instance || jsPlumb;
      const el = event || instance.getContainer();
      const p = ['-webkit-', '-moz-', '-ms-', '-o-'],
        s = 'scale(' + zoomval + ')';
      that.zoom = zoomval;

      that.renderer.setElementStyle(that.greetDiv.nativeElement, 'transform', s);

      instance.setZoom(zoomval);

      // this._setZoom(zoomval, instance, transformOrigin);
      event.preventDefault();
    });

    jsPlumb.ready(function () {
      that.jsplumbback();
    });
  }

}

